import React, { useEffect, useState } from 'react';
import { Pagination, Modal, Form, Input } from 'antd';
import { nanoid } from 'nanoid';
import {
  ArrowRightOutlined,
  ArrowLeftOutlined,
  VerticalLeftOutlined,
  VerticalRightOutlined,
} from '@ant-design/icons';
import './Transfer.less';
export default function Transfer(props) {
  const [leftOptions, setLeftOptions] = useState([]);
  const [leftOption, setLeftOption] = useState([]);
  const [rightOptions, setRightOptions] = useState([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isSet, setIsSet] = useState('');
  const [form] = Form.useForm();
  const [keys, setKeys] = useState('');
  var Os1 = document.getElementsByName('sel1');
  // 右侧框
  var Os2 = document.getElementsByName('sel2');

  useEffect(() => {
    setLeftOptions(props.one);
    setLeftOption(props.one);
    setRightOptions(props.two);
  }, [props]);
  const oneClick = () => {
    if (leftOptions.length > 0) {
      let a = [...leftOptions, ...rightOptions];
      setRightOptions(a);
      setLeftOptions([]);
      // leftOptions.splice(0);
      // leftOptions.length = 0;
    }
  };
  const twoClick = () => {
    if (rightOptions.length > 0) {
      let b = [...rightOptions, ...leftOptions];
      setLeftOptions(b);
      setRightOptions([]);
    }
  };
  const threeClick = () => {
    if (leftOptions.length > 0) {
      let arr = [...Os1];
      let c = [];
      let d = [];
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].checked == true) {
          c.push({ label: arr[i].value, key: nanoid() });
        } else {
          d.push({ label: arr[i].value, key: nanoid() });
        }
      }
      let e = [...c, ...rightOptions];
      setLeftOptions(d);
      setRightOptions(e);
    }
  };
  const fourClick = () => {
    if (rightOptions.length > 0) {
      let arr = [...Os2];
      let c = [];
      let d = [];
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].checked == true) {
          c.push({ label: arr[i].value, key: nanoid() });
        } else {
          d.push({ label: arr[i].value, key: nanoid() });
        }
      }
      let e = [...c, ...leftOptions];
      setLeftOptions(e);
      setRightOptions(d);
    }
  };
  const downClick = (e) => {
    console.log(e);
    let a = rightOptions.findIndex((item) => {
      return item.key == e;
    });
    let arr = [...rightOptions];
    let UponItem = arr[a + 1];
    arr.splice(a + 1, 1);
    arr.splice(a, 0, UponItem);

    setRightOptions(arr);
  };
  const upClick = (e) => {
    console.log(e);
    let a = rightOptions.findIndex((item) => {
      return item.key == e;
    });
    let arr = [...rightOptions];
    let UponItem = arr[a - 1];
    arr.splice(a - 1, 1);
    arr.splice(a, 0, UponItem);
    setRightOptions(arr);
  };
  const deletClick = (e, k) => {
    if (k == 'right') {
      let a = rightOptions.findIndex((item) => {
        return item.key == e;
      });
      let arr = [...rightOptions];
      arr.splice(a, 1);
      setRightOptions(arr);
    } else {
      let a = leftOptions.findIndex((item) => {
        return item.key == e;
      });
      let arr = [...leftOptions];
      arr.splice(a, 1);
      setLeftOptions(arr);
    }
  };
  const pageSizeChange = (page, pageSize) => {
    let b = [...leftOption];
    let l = b.splice(page * pageSize - 10, page * pageSize - 1);
    console.log(l);
    let a = [...l, ...b];
    setLeftOptions(a);
  };
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    if (!isSet) {
      let a = JSON.parse(JSON.stringify(leftOptions));
      let b = { ...form.getFieldValue(), key: new Date().getTime() };
      a.unshift(b);
      setLeftOptions(a);
    } else {
      let a = JSON.parse(JSON.stringify(leftOptions));

      console.log(keys);
      let c = a.map((item) => {
        if (item.key == keys) {
          item.label = form.getFieldValue().label;
        }
        return item;
      });
      console.log(c);
      setLeftOptions(c);
    }
    setIsModalVisible(false);
    form.resetFields();
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    form.resetFields();
  };
  const addClick = () => {
    setIsModalVisible(true);
    setIsSet(false);
  };
  const setClick = (e, k) => {
    setKeys(e);
    setIsSet(true);
    console.log(e);
    setIsModalVisible(true);
    let a = leftOptions.find((item) => {
      return item.key == e;
    });
    console.log(a);
    form.setFieldsValue({
      label: a.label,
    });
  };
  return (
    <div className="all-transfer">
      <div className="container">
        <div className="left">
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <div></div>
            <div className="add" onClick={addClick}>
              新增
            </div>
          </div>

          <div className="table-title">
            <div>运营位图片</div>
            <div>操作</div>
          </div>
          <div className="left-list">
            {leftOptions?.map((item, index) => {
              return (
                <div
                  key={item.key}
                  className="item-border"
                  // style={{
                  //   display: 'flex',
                  //   alignItems: 'center',
                  //   justifyContent: 'space-between',
                  //   borderBottom: '1px soild #ccc',
                  // }}
                >
                  <div
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                    }}
                  >
                    <input
                      type="checkbox"
                      name="sel1"
                      value={item?.label}
                      // disabled={item.isShow}
                    />
                    <img
                      src={require('../../asstes/aaa.png')}
                      style={{ marginLeft: '10px' }}
                    />
                    <div>
                      <div> {item.label}</div>
                      <a>www.baidu.com</a>
                    </div>
                  </div>
                  <div
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                    }}
                  >
                    <div
                      onClick={() => {
                        setClick(item.key, 'left');
                      }}
                      style={{ color: '#40a3ff' }}
                    >
                      编辑
                    </div>
                    <div
                      onClick={() => {
                        deletClick(item.key, 'left');
                      }}
                      style={{ marginLeft: '5px', color: '#40a3ff' }}
                    >
                      删除
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          <Pagination
            defaultCurrent={1}
            total={leftOptions.length}
            onChange={pageSizeChange}
          />
        </div>

        <div className="mid">
          <div
            className="alls-btn"
            id="btnToRight"
            title="右移动选中的"
            onClick={threeClick}
          >
            <ArrowRightOutlined />
          </div>

          <div
            className="alls-btn"
            id="btnToRightAll"
            title="右移动全部"
            onClick={oneClick}
          >
            <VerticalLeftOutlined />
          </div>

          <div
            className="alls-btn"
            id="btnToLeft"
            title="左移动选中的"
            onClick={fourClick}
          >
            <ArrowLeftOutlined />
          </div>

          <div
            className="alls-btn"
            id="btnToLeftAll"
            title="左移动全部"
            onClick={twoClick}
          >
            <VerticalRightOutlined />
          </div>
        </div>

        <div className="right">
          <div className="table-titles">
            <div>运营位图片</div>
            <div>操作</div>
          </div>
          <div className="right-list">
            {rightOptions?.map((item, index) => {
              return (
                <div
                  key={item.key}
                  // style={{
                  //   display: 'flex',
                  //   alignItems: 'center',
                  //   justifyContent: 'space-between',
                  // }}
                  className="item-border"
                >
                  <div
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                    }}
                  >
                    <input
                      type="checkbox"
                      name="sel2"
                      value={item?.label}
                      // disabled={item.isShow}
                    />
                    <img
                      src={require('../../asstes/aaa.png')}
                      style={{ marginLeft: '10px' }}
                    />
                    <div>
                      <div> {item.label}</div>
                      <a>666666</a>
                    </div>
                  </div>
                  <div
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                    }}
                  >
                    <div style={{ color: '#40a3ff' }}>编辑</div>
                    <div
                      className="up"
                      onClick={() => {
                        upClick(item.key);
                      }}
                      style={{ color: '#40a3ff' }}
                    >
                      上移
                    </div>
                    <div
                      style={{ color: '#40a3ff' }}
                      className="down"
                      onClick={() => {
                        downClick(item.key);
                      }}
                    >
                      下移
                    </div>
                    <div
                      style={{ color: '#40a3ff' }}
                      onClick={() => {
                        deletClick(item.key, 'right');
                      }}
                    >
                      删除
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          <Pagination
            defaultCurrent={1}
            total={rightOptions.length}
            onChange={pageSizeChange}
          />
        </div>
      </div>
      <Modal
        okText="Create"
        cancelText="Cancel"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          form={form}
          // layout="vertical"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 18 }}
        >
          <Form.Item name="label" label="运营位名称">
            <Input />
          </Form.Item>
          <Form.Item name="link" label="运营位链接">
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
// Transfer.defaultProps = {
//   one: [{ key: '1', label: '陈奕迅' }],
// };
